<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>首页 - 播客应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="app-container h-full">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
      <div class="status-left">
        <span class="status-time">00:00</span>
      </div>
      <div class="status-right">
        <i class="ri-signal-wifi-fill"></i>
        <i class="ri-battery-fill"></i>
      </div>
    </div>
    
    <!-- 页面内容 -->
    <div class="main-content pb-36">
      <!-- 页面头部 -->
      <div class="px-4 pt-6 pb-2">
        <h1 class="text-2xl font-bold text-gray-900">你好，早上好</h1>
        <p class="text-gray-500 text-sm mt-1">我们为你准备了精彩内容</p>
      </div>
      
      <!-- 正在收听 -->
      <div class="mt-6 px-4">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-semibold text-gray-900">继续收听</h2>
          <a href="#" class="text-sm text-indigo-600 font-medium">查看全部</a>
        </div>
        
        <div class="mt-3 bg-gray-50 rounded-xl p-3 flex items-center click-target" aria-label="继续收听 思想实验播客" role="button" tabindex="0">
          <img src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="思想实验播客" class="w-16 h-16 rounded-lg object-cover">
          <div class="ml-3 flex-1">
            <h3 class="font-medium text-gray-900">思想实验播客</h3>
            <p class="text-xs text-gray-500 mt-1">已播放 24 分钟 · 剩余 18 分钟</p>
            <div class="mt-2 bg-gray-200 h-1 rounded-full w-full">
              <div class="bg-indigo-600 h-1 rounded-full" style="width: 58%;"></div>
            </div>
          </div>
          <button class="ml-4 w-10 h-10 flex items-center justify-center bg-indigo-600 text-white rounded-full relative overflow-hidden" aria-label="播放思想实验播客" onclick="window.location.href='player.html'">
            <i class="ri-play-fill text-lg relative z-10"></i>
          </button>
        </div>
      </div>
      
      <!-- 今日推荐 -->
      <div class="mt-8 px-4">
        <h2 class="text-lg font-semibold text-gray-900">今日推荐</h2>
        <div class="mt-3 grid grid-cols-2 gap-4">
          <!-- 播客卡片 1 -->
          <div class="podcast-card click-target" aria-label="播客：科技早知道" role="button" tabindex="0">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1589903308904-1010c2294adc?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="科技早知道" class="podcast-image">
              <div class="podcast-play">
                <i class="ri-play-fill"></i>
              </div>
            </div>
            <div class="p-2">
              <h3 class="font-medium text-sm">科技早知道</h3>
              <p class="text-xs text-gray-500 mt-1">36集 · 科技新闻</p>
            </div>
          </div>
          
          <!-- 播客卡片 2 -->
          <div class="podcast-card click-target" aria-label="播客：商业内幕" role="button" tabindex="0">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="商业内幕" class="podcast-image">
              <div class="podcast-play">
                <i class="ri-play-fill"></i>
              </div>
            </div>
            <div class="p-2">
              <h3 class="font-medium text-sm">商业内幕</h3>
              <p class="text-xs text-gray-500 mt-1">52集 · 商业分析</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 热门播客 -->
      <div class="mt-8 px-4">
        <h2 class="text-lg font-semibold text-gray-900">热门推荐</h2>
        <div class="mt-4 space-y-4">
          <!-- 热门播客条目 1 -->
          <div class="flex items-center click-target" aria-label="播客：故事FM" role="button" tabindex="0">
            <div class="relative w-16">
              <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="故事FM" class="w-16 h-16 rounded-lg object-cover">
              <span class="absolute top-0 left-0 bg-indigo-600 text-white text-xs font-bold px-1 rounded-br-md">01</span>
            </div>
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-900">故事FM</h3>
              <p class="text-xs text-gray-500 mt-1">记录普通人的真实故事</p>
            </div>
            <button class="ml-2 w-8 h-8 flex items-center justify-center bg-gray-100 text-gray-800 rounded-full relative overflow-hidden" aria-label="播放故事FM">
              <i class="ri-play-fill relative z-10"></i>
            </button>
          </div>
          
          <!-- 热门播客条目 2 -->
          <div class="flex items-center click-target" aria-label="播客：声东击西" role="button" tabindex="0">
            <div class="relative w-16">
              <img src="https://images.unsplash.com/photo-1539558462419-2d391b9ecb78?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="声东击西" class="w-16 h-16 rounded-lg object-cover">
              <span class="absolute top-0 left-0 bg-indigo-600 text-white text-xs font-bold px-1 rounded-br-md">02</span>
            </div>
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-900">声东击西</h3>
              <p class="text-xs text-gray-500 mt-1">聚焦全球资讯的中文播客</p>
            </div>
            <button class="ml-2 w-8 h-8 flex items-center justify-center bg-gray-100 text-gray-800 rounded-full relative overflow-hidden" aria-label="播放声东击西">
              <i class="ri-play-fill relative z-10"></i>
            </button>
          </div>
          
          <!-- 热门播客条目 3 -->
          <div class="flex items-center click-target" aria-label="播客：津津有味" role="button" tabindex="0">
            <div class="relative w-16">
              <img src="https://images.unsplash.com/photo-1549490349-8643362247b5?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="津津有味" class="w-16 h-16 rounded-lg object-cover">
              <span class="absolute top-0 left-0 bg-indigo-600 text-white text-xs font-bold px-1 rounded-br-md">03</span>
            </div>
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-900">津津有味</h3>
              <p class="text-xs text-gray-500 mt-1">美食文化探索</p>
            </div>
            <button class="ml-2 w-8 h-8 flex items-center justify-center bg-gray-100 text-gray-800 rounded-full relative overflow-hidden" aria-label="播放津津有味">
              <i class="ri-play-fill relative z-10"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 分类浏览 -->
      <div class="mt-8 px-4 pb-20">
        <h2 class="text-lg font-semibold text-gray-900">分类浏览</h2>
        <div class="mt-3 grid grid-cols-3 gap-3">
          <div class="bg-indigo-50 p-3 rounded-xl flex flex-col items-center justify-center h-24 click-target" aria-label="科技分类" role="button" tabindex="0">
            <i class="ri-computer-line text-2xl text-indigo-600"></i>
            <span class="mt-2 text-sm font-medium text-gray-900">科技</span>
          </div>
          <div class="bg-amber-50 p-3 rounded-xl flex flex-col items-center justify-center h-24 click-target" aria-label="商业分类" role="button" tabindex="0">
            <i class="ri-briefcase-line text-2xl text-amber-600"></i>
            <span class="mt-2 text-sm font-medium text-gray-900">商业</span>
          </div>
          <div class="bg-green-50 p-3 rounded-xl flex flex-col items-center justify-center h-24 click-target" aria-label="健康分类" role="button" tabindex="0">
            <i class="ri-heart-pulse-line text-2xl text-green-600"></i>
            <span class="mt-2 text-sm font-medium text-gray-900">健康</span>
          </div>
          <div class="bg-rose-50 p-3 rounded-xl flex flex-col items-center justify-center h-24 click-target" aria-label="娱乐分类" role="button" tabindex="0">
            <i class="ri-film-line text-2xl text-rose-600"></i>
            <span class="mt-2 text-sm font-medium text-gray-900">娱乐</span>
          </div>
          <div class="bg-blue-50 p-3 rounded-xl flex flex-col items-center justify-center h-24 click-target" aria-label="教育分类" role="button" tabindex="0">
            <i class="ri-book-open-line text-2xl text-blue-600"></i>
            <span class="mt-2 text-sm font-medium text-gray-900">教育</span>
          </div>
          <div class="bg-gray-50 p-3 rounded-xl flex flex-col items-center justify-center h-24 click-target" aria-label="更多分类" role="button" tabindex="0">
            <i class="ri-more-line text-2xl text-gray-600"></i>
            <span class="mt-2 text-sm font-medium text-gray-900">更多</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="tab-bar">
      <div class="tab-item active-tab" data-page="home.html">
        <i class="ri-home-5-fill tab-icon"></i>
        <span class="tab-text">首页</span>
      </div>
      <div class="tab-item" data-page="discover.html">
        <i class="ri-compass-line tab-icon"></i>
        <span class="tab-text">探索</span>
      </div>
      <div class="tab-item" data-page="library.html">
        <i class="ri-folder-music-line tab-icon"></i>
        <span class="tab-text">收藏</span>
      </div>
      <div class="tab-item" data-page="profile.html">
        <i class="ri-user-line tab-icon"></i>
        <span class="tab-text">我的</span>
      </div>
    </div>
  </div>
  
  <script src="components.js"></script>
</body>
</html> 
